import {React,Fragment,useState,useEffect,useRef} from 'react';
import {Table,Button,Space,Input,Modal,Select,message} from 'antd';
import {SearchOutlined,EditOutlined,DeleteOutlined} from '@ant-design/icons';
import {inject,observer} from 'mobx-react';
import './css/CustomerInfo.css';
const {Option} = Select;

// 成功提示框
const success = (value) => {
  message.success(value);
};
// 失败提示
const error = (value) => {
  message.error(value);
};

//列名 
const mapFieldToChinese = {
  id:'序号',
  memberType:'会员类型',
  productType:'商品类型',
  productClass:'商品分类',
  salesType:'销售类型',
  salesMode:'销售方式',
  discount:'折扣',
  birthdayDiscount:'生日折扣'
}
// 复选
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};


function CustomerDiscount(props) {
  const [id,setId] = useState()//获取序号
  const searchRef = useRef()//获取查询内容

  const birthdayDiscountRef = useRef()//生日折扣
  const discountRef = useRef()//折扣
  const [memberType,setMemberType] = useState('1')//会员类型
  function vipTypeChange(value) {
    setMemberType(value)
  }

  const [productType,setProductType] = useState('1')//商品类型
  function productTypeChange(value) {
    setProductType(value)
  }
  const [productClass,setProductClass] = useState('1')//商品分类
  function productClassChange(value) {
    setProductClass(value)
  }
  const [salesType,setSalesType] = useState('1')//销售类型
  function salesTypeChange(value) {
    setSalesType(value)
  }
  const [salesMode,setSalesMode] = useState('1')//销售方式
  function salesModeChange(value) {
    setSalesMode(value)
  }
      // 添加修改对话框
      const [add, setAdd] = useState(false);
      const [addEdit,setAddEdit]=useState('')//判断是添加还是修改
      // 删除提示模态框
      const [del, setDel] = useState(false);
  // 渲染table
      const [selectionType, setSelectionType] = useState('checkbox');
      const [columns,setColumns] = useState([]);
      const [data,setData] = useState([]);
      const [loading,setLoading] = useState(false)
      function clear() {
        
      }
      // 添加修改
      function addEditInfo(fun){
        let values = {
          fun:fun,
          id:id,
          memberType:memberType,
          productType:productType,
          productClass:productClass,
          salesType:salesType,
          salesMode:salesMode,
          birthdayDiscount:birthdayDiscountRef.current.state.value,
          discount:discountRef.current.state.value
        }
        props.CustomerManagement.addEditCustomerDiscount(values).then((res)=>{
          if(res.code==200){
            success(res.msg)
          }else{
            error(res.msg)
          }
          getList()
        }).catch((err)=>{
          console.log(err);
        })
          clear();
      }
      // 删除
      function delInfo(){
        let values = {
          id:id
        }
        props.CustomerManagement.delCustomerDiscount(values).then((res)=>{
          console.log(res);
          if(res.code==200){
            success(res.msg)
          }
          getList()
        }).catch((err)=>{
          console.log(err);
          error(err.msg)
        })
      } 
      function getList() {
        props.CustomerManagement.getCustomerDiscountList().then((res)=>{
          let keys = Object.keys(res.data[0]);
          let cols = keys.map(item=>{
            if(item == 'memberType'){
              return {
                width: 140,
                title: mapFieldToChinese[item],
                dataIndex: item,
                key: item,
                align: 'center',
                render: (val)=>{
                    if(val == 1){
                        return (
                            <span>银卡</span>
                        )
                    }else if(val == 2){
                        return (
                            <span>金卡</span>
                        )
                    }
                }
              }
            }
            else if(item == 'salesMode'){
              return {
                width: 140,
                title: mapFieldToChinese[item],
                dataIndex: item,
                key: item,
                align: 'center',
                render: (val)=>{
                    if(val == 0){
                        return (
                            <span>有标签价</span>
                        )
                    }else if(val == 1){
                        return (
                            <span>无标签价</span>
                        )
                    }
                }
              }
            }
            else if(item == 'salesType'){
              return {
                width: 140,
                title: mapFieldToChinese[item],
                dataIndex: item,
                key: item,
                align: 'center',
                render: (val)=>{
                    if(val == 1){
                        return (
                            <span>重量</span>
                        )
                    }else if(val == 2){
                        return (
                            <span>数量</span>
                        )
                    }
                }
              }
            }else{
              return {
                width: 170,
                title: mapFieldToChinese[item],
                dataIndex: item,
                key: item,
                align: 'center'
              }
            }
          })
          cols.push({
            width:130,
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            fixed: 'right',
            render: ()=>{
                return(
                  <Space>
                  <Button onClick={() => {setAdd(true);setAddEdit(1)}} type='primary' shape="circle" icon={<EditOutlined />}></Button>
                  <Button onClick={() => {setDel(true)}} type='danger' shape="circle" icon={<DeleteOutlined />}></Button>
                </Space>
                )
            }
          })
          setColumns(cols)
          setData(res.data)
        }).catch((err)=>{
          console.log(err);
        }).finally(()=> {setLoading(false);})
      }
      useEffect(()=>{
        setLoading(true)
        getList()
      },[]);
    return (
        <Fragment>
            <Table 
            loading={loading}
            rowSelection={{
            type: selectionType,
                ...rowSelection,
            }} bordered='true' 
            title={() => {return (<Fragment>
              <h4>客户折扣</h4>
              <div className='tableHeader'>
                <div>
                  <Input className='search' placeholder="请输入筛选内容" prefix={<SearchOutlined />}/>
                  <Button type='primary'>查询</Button>
                </div>
                <Button type='primary' onClick={() => {setAdd(true);setAddEdit(0)}}>创建折扣</Button>
              </div>
              </Fragment>)}} 
            onRow = {(record) => {
              return {
                onClick: () => {
                  setId(record.id)
                  }
                }
              }
            }
            columns={columns} dataSource={data} rowKey={(record) => `id${record.id}`} pagination={{ pageSize: 10 }} scroll={{ y: 400 }}></Table>
              {/* 添加修改框 */}
              <Modal
              title="详细信息"
              centered
              visible={add}
              okText= '确定'
              cancelText= '取消'
              onOk={() => {
                setAdd(false);
                addEditInfo(addEdit)
              }}
              onCancel={() => {setAdd(false);}}
              width={1000}
            >
              <div className='addModal'>
                <div>
                  会员类型：<Select defaultValue={memberType} style={{ width: 170,textAlign:'left'}} onChange={vipTypeChange}>
                              <Option value="1">银卡会员</Option>
                              <Option value="2">金卡会员</Option>
                            </Select>
                </div>
                <div>
                  商品类型：<Select defaultValue={productType} style={{ width: 170,textAlign:'left'}} onChange={productTypeChange}>
                              <Option value="1">素金类</Option>
                              <Option value="2">JS</Option>
                            </Select>
                </div>
                <div>
                  商品分类：<Select defaultValue={productClass} style={{ width: 170,textAlign:'left'}} onChange={productClassChange}>
                              <Option value="1">白银</Option>
                              <Option value="2">黄金</Option>
                              <Option value="3">铂金</Option>
                            </Select>
                </div>

                <div>
                  销售类型：<Select defaultValue={salesType} style={{ width: 170,textAlign:'left'}} onChange={salesTypeChange}>
                              <Option value="1">数量</Option>
                              <Option value="2">重量</Option>
                            </Select>
                </div>
                <div>
                  销售方式：<Select defaultValue={salesMode} style={{ width: 170,textAlign:'left'}} onChange={salesModeChange}>
                              <Option value="1">有标签价</Option>
                              <Option value="2">无标签价</Option>
                            </Select>
                </div>
                <div className='birthdayDiscount'>
                  生日折扣：<Input placeholder='请输入' ref={birthdayDiscountRef}/>
                </div>

                <div>
                  折扣：<Input placeholder='请输入' ref={discountRef} />
                </div>
              </div>
            </Modal>
            {/* 删除提示 */}
            <Modal title="删除提示" 
            visible={del}
            okText= '确定'
            cancelText= '取消'
            onOk={() => {
              delInfo()
              setDel(false)
            }}
            onCancel={() => {setDel(false)}}
            >
              <p>你确定要删除这条信息吗</p>
            </Modal>
        </Fragment>
    );
}

export default inject('CustomerManagement')(observer(CustomerDiscount))
// export default CustomerDiscount;